<template>
	<view>
		<fa-navbar title="选择类型"></fa-navbar>
		<u-gap height="35" bg-color="#F6F8FB"></u-gap>
		<view>
			<view class="level1" span="5">
				<view class="item item-parent" :class="selectedParentId === parentCategory.DictItemKey ? 'selected selected-parent' : '' " v-for="(parentCategory, index) in dictList.parent" :key="index" @click="selectedParent(index)">
					<text >{{parentCategory.DictItemValue}}</text>
				</view>
			</view >
			<view class="level2" span="7">
				<view class="item" v-for="(category, index) in dictList.children" :key="index" @click="selected(index)">
						<text :class="selectedChildrenId === category.DictItemKey ? 'selected' : '' ">{{category.DictItemValue}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import FaIcon from '@/components/fa-icon/fa-icon.vue'
	export default {
		components: {FaIcon, faNavbar},
		data() {
			return {
				selectedParentId: "",
				selectedChildrenId: "",
				dictList: "",
			}
		},
		methods: {
			selected(index) {
				let children = this.dictList.children[index];
				this.selectedChildrenId = children.DictItemKey;
				// 同时将父、子分类传递回去
				uni.$emit('onChooseCategory', {parent: this.dictList.parent.find(item => item.DictItemKey === children.DictTypeKey), children});
				uni.navigateBack();
			},
			selectedParent(index) {
				let parent = this.dictList.parent[index];
			    let children = this.dictList[parent.DictItemKey];
				if (children) {
					// 有子分类
					this.dictList.children = children;
					this.selectedParentId = parent.DictItemKey;
				} else {
					// 没有子分类则直接选中父级分类
					uni.$emit('onChooseCategory', {parent});
					uni.navigateBack();
				}
			},
			categoryConvertor(dictList) {
				// 排序后顶级分类在最前面
			    dictList = dictList.sort((a, b) => a.DictTypeKey.length - b.DictTypeKey.length);
				let list = {};
				let markParent = true;
				dictList.forEach(item => {
					if (!list[item.DictTypeKey]) {
						list[item.DictTypeKey] = [];
					}
					if (markParent) {
						list.parent = list[item.DictTypeKey];
						markParent = false;
					}
					list[item.DictTypeKey].push(item);
				});
				return list;
			}
		},
		async onLoad(params) {
			let res = await this.$api.getTypeStatusList({"ParentKey": "ASSET_TYPE", "PageIndex": 1, "PageSize": 10000});
			this.dictList = this.categoryConvertor(res.data.Data);
			
			if (params.parentItemKey) {
				this.selectedParentId = params.parentItemKey;
			    if (params.childrenItemKey) {
					let parent = this.dictList.parent.find(item => item.DictItemKey === params.parentItemKey);
					this.dictList.children = this.dictList[params.parentItemKey];
					this.selectedChildrenId = params.childrenItemKey;
				}
			}
		}
	}
</script>

<style scoped>
.item {
	height: 88rpx;
	line-height: 88rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #333333;
	padding: 0 30rpx;
	display: -webkit-box; /*弹性伸缩盒子模型显示*/
	-webkit-box-orient: vertical; /*排列方式*/ 
	-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
	overflow: hidden; /*溢出隐藏*/
}
.item-parent {
	background-color: #F6F8FB;
}
.level1, .level2 {
	display: block;
	float: left;
	height: 98vh;
}
.level1 {
	width: 40%;
	background: #F6F8FB;
}
.level2 {
	width: 60%;
}
.selected {
	color: rgba(55, 120, 233, 0.980392156862745) !important;
}
.selected-image {
	width: 40rpx;
	height: 40rpx;
	display: block;
}
.selected-parent {
	background-color: #FFF !important;
}
</style>
